<template>
  <Dialog
    v-model:visible="visible"
    @update:visible="func"
    :showTop="false"
    :top="`8vh`"
    width="90vw"
  >
    <div class="close thumb" title="关闭" @click="() => func(false)">
      <img :src="publicUrl(`/images/close-white.png`)" />
    </div>
    <div class="dialog-main">
      <div class="top">
        <div class="left">
          <div class="dot"></div>
          <div class="title">面料选择</div>
        </div>
        <div class="right">

          <div class="btn thumb" @click="addBtn" v-show="fabricValue === 'supply'">添加面料</div>

          <div class="fabricOption v--select-black">
            <Select
              :options="fabricOption"
              :searchable="false"
              borderColor="#b5b5b5"
              styleColor="#b5b5b5"
              valueColor="#2D2D2D"
              label="title"
              :reduce="(option:Fabric) => option.value"
              :clearable="false"
              v-model:value="fabricValue"
            />
          </div>
          <div class="search-input-right">
            <div class="search-input">
              <input placeholder="请输入面料编码" />
            </div>
            <div class="search-btn thumb">
              <img :src="publicUrl(`/images/search -white.png`)" />
            </div>
          </div>
        </div>
      </div>

      <div class="select-gather">
        <div class="part" v-for="item in options">
          <div class="left">{{ item.title }}</div>
          <div class="right v--select-no-border">
            <Select
              :options="item.option"
              :searchable="true"
              :placeholder="`请选择${item.title}`"
              label="label"
              :border="true"
              :reduce="(option:Options) => option.value"
              :clearable="true"
              v-model:value="item.value"
            />
          </div>
        </div>

      </div>

      <div class="main-content">
        <div
          class="part part-width"
          v-for="item in porps.fabricItem"
          @click="() => choose(item)"
        >
          <MakeFabric :item="item" />
          <div class="frame thumb" v-show="item.fabric_id === fabric_id"></div>
        </div>


        <div
          class="part part-width"
          v-for="item in surplusDiv(porps.fabricItem.length,6)"
        >
        </div>


      </div>
    </div>
  </Dialog>
  <SupplyForm v-model:visible="visibleApplyForm" />
</template>
<script setup lang="ts" name="">
import { ref, watch } from "vue";
import Dialog from "@/components/Dialog/index.vue";
import MakeFabric from "@/components/MakeFabric/index.vue";
import { publicUrl,surplusDiv } from "@/utils/util";
import  SupplyForm from "./components/SupplyForm/index.vue";
import { FabricItem as FabricItemInterface } from "@/components/MakeFabric/interface";
import Select from "@/components/Select/index.vue";
interface Props {
  visible?: boolean;
  defFabricId: number;
  fabricItem: Array<FabricItemInterface>;
}

interface Fabric {
  title: string;
  value: string;
}
interface Options {
  title: string,
    option: Array<{
       label:string,
       value:number,
    }>,
    value: undefined|number,
}
const fabricOption = ref<Array<Fabric>>([
  {
    title: "平台面料",
    value: "platform",
  },
  {
    title: "工厂面料",
    value: "factory",
  },
  {
    title: "客供面料",
    value: "supply",
  },
]);

const options:{[key:string]:Options} = {
  type: {
    title: "面料类型",
    option: [
      { label: "丝绸", value: 1 },
      { label: "亚麻", value: 2 },
      { label: "棉布", value: 3 },
      { label: "呢绒", value: 4 },
      { label: "皮革", value: 5 },
      { label: "丝绸", value: 6 },
      { label: "亚麻", value: 7 },
      { label: "棉布", value: 8 },
      { label: "呢绒", value: 9 },
      { label: "皮革", value: 10 },
      { label: "丝绸", value: 11 },
      { label: "亚麻", value: 12 },
      { label: "棉布", value: 13 },
      { label: "呢绒", value: 14 },
      { label: "皮革", value: 15 },
    ],
    value: undefined,
  },
  series: {
    title: "面料系列",
    option: [
      { label: "休闲面料休闲面料休闲面休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料料休闲面料休闲面料休闲面料", value: 1 },
      { label: "休闲面料休闲面料休闲面休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料料休闲面料休闲面料休闲面料", value: 2 },
      { label: "休闲面料休闲面料休闲面休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料料休闲面料休闲面料休闲面料", value: 3 },
      { label: "休闲面料休闲面料休闲面休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料料休闲面料休闲面料休闲面料", value: 4 },
      { label: "休闲面料休闲面料休闲面休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料料休闲面料休闲面料休闲面料", value: 5 },
      { label: "休闲面料休闲面料休闲面休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料料休闲面料休闲面料休闲面料", value: 6 },
      { label: "休闲面料休闲面料休闲面休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料料休闲面料休闲面料休闲面料", value: 7 },
      { label: "休闲面料休闲面料休闲面休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料料休闲面料休闲面料休闲面料", value: 8 },
      { label: "休闲面料休闲面料休闲面休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料休闲面料料休闲面料休闲面料休闲面料", value: 9 },
      { label: "柔软面料", value: 10 },
    ],
    value: undefined,
  },
  component: {
    title: "成份",
    option: [
      { label: "成份1", value: 1 },
      { label: "成份2", value: 2 },
    ],
    value: undefined,
  },
  color: {
    title: "面料颜色",

    option: [
      { label: "选项1", value: 1 },
      { label: "选项2", value: 2 },
    ],
    value: undefined,
  },
  tidy: {
    title: "整理方式",

    option: [
      { label: "选项1", value: 1 },
      { label: "选项2", value: 2 },
    ],
    value: undefined,
  },
  pattern: {
    title: "花纹",

    option: [
      { label: "选项1", value: 1 },
      { label: "选项2", value: 2 },
    ],
    value: undefined,
  },
};

const fabricValue = ref<"platform" | "supply" |"factory">("factory");

const porps = withDefaults(defineProps<Props>(), {
  visible: false,
  defFabricId: 0,
  fabricItem: () => [],
});
const emits = defineEmits<{
  (event: "update:visible", bool: boolean): void;
  (event: "choose", data: FabricItemInterface, str: string): void;
}>();
const func = (bool: boolean) => {
  emits("update:visible", bool);
};

const visibleApplyForm =  ref<boolean>(false);

const addBtn = ()=>{
  visibleApplyForm.value = true;
}

const visible = ref<boolean>(porps.visible);
const fabric_id = ref<number>(porps.defFabricId);
const choose = (item: FabricItemInterface) => {
  fabric_id.value = item.fabric_id;
  emits(
    "choose",
    item,
    fabricOption.value.find((item: Fabric) => item.value === fabricValue.value)
      ?.title as string
  );
  emits("update:visible", false);
};
watch(
  () => porps.visible,
  (newValue) => (visible.value = newValue)
);

const initData = (menuTitle: "platform" | "factory" | "supply") => {
  fabricValue.value = menuTitle;
};

defineExpose({ initData });
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
